<div id="cart_block">
    <div id="header">Ваш заказ</div>
    <ul id="list" class="empty">
    </ul>
    <div id="list_total" style="display:none;">
        Итого:<span></span>
    </div>
    
    <div id="client_form">
        <input type="text" value="Имя*" name="name"/>
        <input type="text" value="Контактный телефон*" name="phone"/>
        <input type="text" value="Электронная почта*" name="email"/>
        <textarea name="address">Почтовый адрес*</textarea>
    </div>
    <div id="footer"><a href="#" id="order">Оформить</a></div>
</div>

<script>
    var cart = {
        product: {},
        total: function(){
            var total = 0;
            for(var key in this.product){
                total += this.product[key].quantity * this.product[key].price;
            }
            return total;
        },
        add: function(p){
            if(this.product[p.id] != undefined){
                this.product[p.id].quantity++;
            } else {
                this.product[p.id] = p;
            }
            ids = "";
            for(var id in this.product){
                ids += "  " + id;
            }
            this.show();
        },
        show: function(){
            var list = "";
            var product;
            for(var id in this.product){
                product = this.product[id];
                if(product != null){
                    list += "<li id=\"" + product.id + "\">"+
                                "<a href=\"" + product.href + "\">" + product.name + "</a>" +
                                "<span class=\"price\">" + product.price + "</span>" +
                                "<input type=\"text\" value=\"" + product.quantity + "\"/>" +
                                "<a class=\"delete\"></span>" +
                            "</li>";
                } else {
                    delete this.product[id];
                }
            }
            if(list.length){
                $('#list').removeClass('empty').html(list);
                $('#list_total').show().find('span').html(cart.total() + 'p.');
            } else {
                $('#list').addClass('empty').html('');
                $('#list_total').hide();
                $('#client_form').hide();
            }
            this.save_to_cookie();
        },
        remove: function(id){
            delete this.product[id];
            this.show();
        },
        edit: function(id, option, value){
            if(this.product[id] != undefined && this.product[id][option] != undefined){
                this.product[id][option] = value;
                this.show();
            }
        },
        clear: function(){
            for(var key in this.product)
                delete this.product[key];
            cart.show();
        },
        save_to_cookie: function(){
            document.cookie = "product=" + $.toJSON(this.product) + "; path=/";
        },
        load_from_cookie: function(){
            var cookie_array = document.cookie.split('; ');
            for(var i = 0; i < cookie_array.length; i++){
                cookie_pair = cookie_array[i].split('=');
                if(cookie_pair[0] == "product")
                    this.product = $.evalJSON(cookie_pair[1]);
            }
        }
        
    };
    
    var cart_block_top = $('#cart_block').offset().top;
    var timeoutId;
    
    function on_window_scroll(){
      if($('#client_form:visible').size() == 0){
          var dif = $(document).scrollTop() + 50 - cart_block_top;
          if(dif < 0) 
              dif = 0;
          $('#cart_block').stop().animate({top: dif}, 900);
      }
    }
    
    $(window).scroll(function(){
        clearTimeout(timeoutId);
        timeoutId = window.setTimeout(on_window_scroll, 200)
    });
    
    $('#client_form input, #client_form textarea').each(function(){
        $(this).attr('hint', $(this).attr('value'));
    });
    
    $('document').ready(function(){
        cart.load_from_cookie();
        cart.show();
        
        $("#client_form input, #client_form textarea").bind('focus', function(){
            if($(this).val() == $(this).attr('hint')){
                $(this).val('');
                $(this).addClass('value');
            }
        });    

        $("#client_form input, #client_form textarea").live('blur', function(){
            if($(this).val() == ''){         
                $(this).val($(this).attr('hint'));
                $(this).removeClass('value');
            }
        });  
        
        $('#list').droppable({'scope':'cart',
                              'hoverClass': 'over',
                              'drop': function(event, ui){
                                  var product = {};
                                  product.id = ui.draggable.attr('id');
                                  product.name = ui.draggable.attr('name');
                                  product.href = ui.draggable.attr('href');
                                  product.price = ui.draggable.attr('price');
                                  product.quantity = 1;
                                  cart.add(product);
                              }
        });
        
        $('#list a.delete').live('click', function(){
            cart.remove($(this).parent('li').attr('id'));
            return false;
        });
        
        $('#list input').live('change', function(){
            cart.edit($(this).parent('li').attr('id'), 'quantity', $(this).val());
        });
        
        $('#order').bind('click', function(){            
            if($('#client_form:visible').size()){
                var a = $(this);
                var text = a.text();
                var error = false;
                $('#client_form input, #client_form textarea').each(function(){
                    if($(this).val().length == 0 || $(this).val() == $(this).attr('hint')){
                        alert('Вы не заполнили обязательное поле ' + $(this).attr('hint'));
                        error = true;
                        return false;
                    }
                });
                if(!error){
                    var data = {};
                    data.product = cart.product;
                    data.client = {'name': $('#client_form input[name=name]').val(),
                                   'phone': $('#client_form input[name=phone]').val(),
                                   'email': $('#client_form input[name=email]').val(),
                                   'address': $('#client_form textarea[name=address]').val()};
                               
                    a.addClass('processing').text('');
                    $.ajax({'url':'/service/email',
                            'type':'POST',
                            'data':data,
                            'error':function(){
                                error = true;
                                alert('Ошибка обращения к серверу.\n\rПожалуйста, повторите попытку чуть позже.');                                
                             },
                            'success':function(f){
                                response = eval("(" + f + ")");
                                if(response.status == 'ok')
                                    alert('Ваш заказ был успешно отправлен.\n\rВ ближайшее время менеджеры нашего магазина свяжутся с вами.');
                                else {
                                    error = true;
                                    alert('Ошибка отправки заказа.\n\rПожалуйста, повторите попытку чуть позже или свяжитесь с нами по телефону.');                                   
                                }
                             },
                             'complete':function(){
                                a.removeClass('processing').text(text);
                                $('#client_form').hide();
                                if(!error){                                    
                                    cart.clear();                     
                                }
                             }
                    });                  
                }              
            } else {
                $('#cart_block').css({'top':0});
                $(document).scrollTop(cart_block_top - 50);
                $('#client_form').slideDown(300);
                
            }
            return false;
        })
    });


   
</script>